<template>
    <!--<div class="flex flex-col min-h-screen bg-no-repeat bg-center bg-cover" :style="{backgroundImage:config.backdrop}">-->
    <div class="login flex flex-col min-h-screen bg-no-repeat bg-center bg-cover">
        <div class="flex-1 flex items-center justify-center">
            <div class="flex h-[500px] w-[390px] rounded-lg bg-white opacity-90">
                <div class="flex flex-col flex-1 mx-10 mt-12">
                    <div class="text-center text-3xl font-medium mb-10">{{ config.webName }}</div>
                    <el-form
                        ref="formRef"
                        :model="formData"
                        size="large"
                        status-icon>
                        <el-form-item prop="account"
                                      :rules="[{required: true, message:'请输入账号',trigger:'change'}]">
                            <el-input
                                v-model="formData.account"
                                placeholder="请输入账号"
                                @keyup.enter="handleEnter"
                            >
                                <template #prepend>
                                    <Icons name="el-icon-Avatar"/>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password"
                                      :rules="[{required: true, message:'请输入密码',trigger:'change'}]">
                            <el-input
                                ref="passwordRef"
                                v-model="formData.password"
                                show-password
                                placeholder="请输入密码"
                                @keyup.enter="handleEnter"
                            >
                                <template #prepend>
                                    <Icons name="el-icon-Lock"/>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <div class="mb-5">
                        <el-checkbox v-model="remAccount" label="记住账号"></el-checkbox>
                    </div>
                    <el-button
                        type="primary"
                        size="large"
                        :loading="loginLoading"
                        @click="handleEnter"
                    >
                        登录
                    </el-button>
                </div>
            </div>
        </div>
        
        <div class="flex flex-col bg-transparent text-center p-4 text-orange-50">
            <a href="https://beian.miit.gov.cn/" target="_blank">{{ config.copyright?.recordNumber }}</a>
            <div class="flex justify-center items-center">
                <img src="./images/favicon-footer.png" alt="图标" class="h-4 w-4 mr-2">
                <p> {{ config.copyright.caseNumber }} </p>
            </div>
        </div>
    
    </div>
</template>
<script lang="ts" setup>
import {computed, Ref, shallowRef} from "vue";
import useAppStore from "@/base/stores/modules/app";
import ImageContain from "@/components/image-contain/index.vue"
import {FormInstance, InputInstance} from "element-plus";
import Icons from "@/components/icon/index.vue"
import {ShallowRef, UnwrapNestedRefs} from "@vue/reactivity";
import cache from "@/utils/cache";
import {ACCOUNT_KEY} from "@/config/enums/cacheEnums";
import {ECacheKey} from "@/config/enums";
import useUserStore from "@/base/stores/modules/user";
import router from "@/base/router";
import {PageEnum} from "@/config/enums/pageEnum";
import {getCopyright} from "@/api/setting/website";

const passwordRef: ShallowRef = shallowRef<InputInstance>()
const formRef: ShallowRef = shallowRef<FormInstance>()
const loginLoading: Ref<boolean> = ref(false)
const remAccount: Ref<boolean> = ref(false)
const appStore = useAppStore();
const config: Record<string, any> = computed(() => appStore.config)


const formData = reactive({
    // 账号
    account: '',
    // 密码
    password: '',
})


/**
 * 回车按键监听
 *
 * @author 徐寿春
 * 2023/5/22 15:40
 */
function handleEnter() {
    if (!formData.password) {
        return passwordRef.value?.focus()
    }
    getHandleLogin(formRef)
}


/**
 *  登录处理
 *
 * @author 徐寿春
 * 2023/5/22 15:40
 */
function getHandleLogin(formRef: ShallowRef<FormInstance>): void {
    // 表单校验
    formRef.value?.validate((valid: boolean) => {
        if (!valid) {
            return
        }
        loginLoading.value = true
        
        // 记住账号，本地缓存
        cache.set(ECacheKey.ACCOUNT, {
            remember: remAccount.value,
            account: formData.account
        })
        
        const userStore = useUserStore()
        userStore
            .login(formData)
            .then(() => {
                router.replace(PageEnum.INDEX).then(() => {
                })
            })
            
            .catch((err) => {
                console.log("登陆错误", err)
            })
            .finally(() => {
                loginLoading.value = false
            })
    })
}


/**
 * 获取记住密码
 *
 * @author 徐寿春
 * 2023/5/22 15:40
 */
function getRememberPassword() {
    const value = cache.get(ACCOUNT_KEY)
    if (!!value?.remember) {
        remAccount.value = value.remember
        formData.account = value.account
    }
    
}


onMounted(() => {
        getRememberPassword()
    }
)

</script>


<style lang="scss" scoped>

//bg-no-repeat 重复
.login {
    background-image: url('./images/e27858e973f5d7d3904835f46abbdjpeg.jpeg');
}


</style>

